<template>
  <div class="wrapper">
    <div class="content">
      <!-- <div>{{ zzKey }}</div> -->
      <div class="zz_item_tit">{{ kname.name + " " + kname.gs }}</div>
      <div class="zzcot">
        <Highlight
          highlight-class="custom-class"
          class="zz_item"
          v-for="(item, index) in content"
          :keywords="keywords"
          :source-string="item"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { Highlight } from "vant";
import { selectYudingZhiz } from "../api/dbUtils";
export default {
  name: "Test",
  async created() {
    await this.initZhizhi();
  },
  components: {
    Highlight,
  },
  data() {
    return {  
      kname: {
        name: "gg",
        gs: "ss",
      },
      content: [],
      keywords: [
        "课体",
        "课义",
        "解曰",
        "断曰",
        "天时",
        "家宅",
        "胎产",
        "功名",
        "求财",
        "疾病",
        "失脱",
        "出行",
        "行人",
        "争讼",
        "兵战",
        "毕法云",
        "课经云",
        "纂义云",
        "袖中金云",
        "订讹云",
        "纂要云",
        "心印赋云",
        "括囊赋云",
        "指南",
      ],
    };
  },
  props: {
    zzKey: String,
  },
  methods: {
    async initZhizhi() {
      let zhizhi = await selectYudingZhiz(this.zzKey);
      // alert(JSON.stringify(zhizhi.name))
      let arrkname = zhizhi.name.split("\u3000");
      this.kname = {
        name: arrkname[0],
        gs: arrkname[1],
      };
      // alert(JSON.stringify(zhizhi.content))
      // this.content = JSON.stringify(zhizhi.content).replaceAll('\"', '').replaceAll('\\r\\n', "").split("\u3000");
      // alert(this.content.length)
      // alert(JSON.stringify(content))
      this.content = this.splitTextByKeywords(
        JSON.stringify(zhizhi.content).replaceAll('"', "").replaceAll("\\r\\n", ""),
        this.keywords
      );
    },
    splitTextByKeywords(text, keywords) {
      // 构建正则匹配模式：匹配关键字+冒号，并用捕获组保留关键字
      // 为避免短关键字匹配长关键字（如"课经"匹配"课经云"），按关键字长度倒序排序
      const sortedKeywords = [...keywords].sort((a, b) => b.length - a.length);
      const keywordPattern = sortedKeywords.map((key) => `${key}：`).join("|");
      const regex = new RegExp(`(${keywordPattern})`, "g");

      // 分割文本并保留关键字
      const parts = text.split(regex);

      // 过滤空字符串，组合成"关键字：内容"格式
      const result = [];
      for (let i = 1; i < parts.length; i += 2) {
        const keyPart = parts[i];
        const content = parts[i + 1]?.trim() || ""; // 处理内容部分，去除首尾空白
        if (keyPart) {
          result.push(keyPart + content);
        }
      }

      return result;
    },
  },
  watch: {
    zzKey(newValue, oldValue) {
      this.initZhizhi();
    },
  },
};
</script>

<style lang="scss" scoped>
.custom-class {
  color: rergb(19, 130, 150);
}

.wrapper {
  // background-color: #b81616;
  position: fixed;
 margin-top: 50vh;
 border-radius: 12px;
  width: 100vw;
  background-color: var(--lr_lcbgc);
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 50vh;
  .content {
    padding-bottom: 10px;
    flex-grow: 1;
    width: 94vw;
    background-color: #fff;
    border-radius: 6px;
    overflow: scroll;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - var(--nav_btn_height));
    .zz_item_tit {
      font-size: 13px;
      margin-top: 5px;
      color: #4d0b0b;
    }

    .zzcot {
      margin-bottom: 20px;

      .zz_item {
        font-size: 13px;
        margin-top: 10px;
        line-height: 18px;
        color: #595959;
        // background-color: #c28585;
        // border-bottom: 1px solid #ac2424;
      }
    }
  }

  .nav {
    width: 100vw;
    height: 3.8rem;
    // background-color: var(--cart_bg_color);
    display: flex;
    align-items: center;
    border-top: 0.7px solid #d7d7d7;
    // background-color: #dbdbdb;

    .nav_item {
      text-align: center;
      margin-left: 10px;
      // background-color: #fff;
      // border: 2px solid #6f0e0e;
      font-size: 16px;
      font-weight: 300;
      letter-spacing: 2px;
      border-radius: 15px;
      color: #ababab;
      padding-left: 3px;
      padding-right: 3px;
      padding-top: 1px;
      padding-bottom: 1px;
      width: fit-content;
    }
  }
}
</style>
